<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>历史记录页面</title>
<link rel="stylesheet" type="text/css" href="<%request.getContextPath();%>/css/jquery.dataTables.css"/>
<link type="text/css" href="<%request.getContextPath();%>/css/bootstrap.min.css" rel="stylesheet"/>
<link type="text/css" href="<%request.getContextPath();%>/css/commonStyle.css" rel="stylesheet"/>
<style type="text/css" class="init">
#example th.delete_line{border: solid 0px white;} 
#example td.add_line{border-bottom: solid 1px black;}
</style>
<script type="text/javascript" language="javascript" src="<%request.getContextPath();%>/js/jquery.js"></script>
<script type="text/javascript" src="<%request.getContextPath();%>/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
    var ds = eval( ${data});
	//控制表格下边线
    $('#example tfoot').find('th').addClass('delete_line');
    //$('#example tr:last').find('td').addClass('add_line');
	//在表格加入下拉框筛选
    $('#example').DataTable( {
        "data": ds,
        "scrollY": "220px",
        "order": [[0, "desc"]],
        "paging": false, "columns": [
            {"data": "logid"},
            {"data": "content"},
            {"data": "description"},
            {"data": "userid"},
            {"data": "updatetime"}
        ],

        initComplete: function () {
            var api = this.api();
 
            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
					var newD=d;
					if(newD.length>8){
						newD=newD.substring(0,8)+"..."
					}
                    select.append( '<option value="'+d+'">'+newD+'</option>' )
                } );

            } );
        }
    } );
    $(document).ready(function() {
    var table = $('#example').DataTable();
 //表格的行多选
    $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
 //将选中行删除
    $('#Popups_in_btn1').click( function () {
        table.row('.selected').remove().draw( false );
    } );
} );
} );
</script>
</head>

<body>
<div class="container" style="width:1052px; margin:0px;">
<div class="row show-grid">
	<h3 class="Page_title">${tableTitle}历史记录</h3>
</div>
  <div class="row show-grid unified-border"> 
    <!--table list starts-->
    <div class="col-md-12" >
      <form action="">
        <table id="example" class="display" cellspacing="0" style="width:900px;">
          <thead>
            <tr>
              <th>序号</th>
              <th>操作内容</th>
              <th>备注</th>
              <th>操作者</th>
              <th>操作时间</th>
            </tr>
          </thead>
          <tfoot>
          <tr>
              <th>序号</th>
              <th>操作内容</th>
              <th>备注</th>
              <th>操作者</th>
              <th>操作时间</th>
            </tr>
          </tfoot>
        </table>
      </form>
    </div>
    <!--table list ends--> 
  </div>

</div>

</body>
</html>
